<template>
	<view class="content flexColumn">
		<image class="logo" src="../../static/newimg/1.png"></image>
		<view class="back">
			<view class="flexRow">
				<text class="b1">最新岗位</text>
				<text class="b2">
					<picker @change="bindPickerChangenn" :value="indexnn" :range="arraynn" class="inputs">
						<view class="uni-input">{{arraynn[indexnn]}}</view>
					</picker>
				</text>
				<text class="b2">
					<picker @change="bindPickerChange" :value="index" :range="array" class="inputs">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</text>
			</view>

			<view v-for="item in 6">
				<view class="flexRow row1">
					<text class="c1">UI设计师</text>
					<text class="c2">12-16K/月</text>
				</view>

				<view class="imgList flexRow">
					<view class="flexRow imgrow1">
						<image src="../../static/newimg/2.png" class="img" style="width: 24upx;height: 30upx;"></image>
						<text class="t1">海州</text>

						<image src="../../static/newimg/3.png" class="img left" style="width: 34rpx;height: 30rpx;"></image>
						<text class="t1">3-5年</text>

						<image src="../../static/newimg/4.png" class="img left" style="width: 44rpx;height: 30rpx;"></image>
						<text class="t1">大专</text>
					</view>
					<view class="imgrow2">17:00今天</view>
				</view>

				<view class="company">江苏省库及苏省库有限公司</view>

				<view class="line"></view>
			</view>

		</view>
		<view class="loading-text">{{ loadingText }}</view>
	</view>
</template>

<script>
	import interfaces from '../../utils/interfaces.js'
	export default {
		data() {
			return {
				array: ['筛选', "条件1"],
				index: 0,

				arraynn: ['连云', "条件1"],
				indexnn: 0,

				loadingText: '正在加载....',
				page: 1
			}
		},
		onLoad() {
			const code = this.getUrlCode('code')
			console.log(code)
			this.loadData()
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			bindPickerChangenn: function(e) {
				this.indexnn = e.target.value
			},
			getUrlCode(name){
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			loadData() {
				var _this = this;
				//岗位查询
				const param = {
					limit:10,
					page:this.page
				}
				this.request({
					url: interfaces.dszdc,
					method: "post",
					data: param,
					success: res => {
						console.log(res.map.recruitmentList);
					}
				});
			}
		},
		// 上啦加载
		onReachBottom() {
			this.page++;
			console.log(this.page)
			this.loadData();
		}
	}
</script>

<style lang='scss'>
	page {
		background: #F7F7F7;
	}

	.logo {
		width: 100%;
		height: 360upx;
		display: block;
		object-fit: cover;
	}

	.back {
		width: 86%;
		margin-left: 4%;
		padding: 3%;
		z-index: 99;
		margin-top: -60rpx;
		background: $uni-bg-color;
		font-size: $uni-font-size-big;

		.b1 {
			width: 60%;
			font-weight: 650;
		}

		.b2 {
			width: 20%;
			text-align: right;
			font-weight: 650;
		}

		.row1 {
			margin-top: 30rpx;

			.c1 {
				width: 50%;
				font-size: $uni-font-size-lg;
				font-weight: 680;
			}

			.c2 {
				width: 50%;
				color: red;
				text-align: right;
			}
		}

		.imgList {
			height: 40rpx;
			align-items: center;
			margin-top: 10rpx;
			font-size: $uni-font-size-sm;
			color: gray;

			.imgrow1 {
				width: 80%;
			}

			.imgrow2 {
				width: 20%;
				text-align: right;
			}

			.t1 {
				margin-left: 10rpx;
			}

			.img {
				width: 30rpx;
				height: 30rpx;
			}

			.left {
				margin-left: 25rpx;
			}
		}

		.company {
			margin-top: 10rpx;
			font-size: $uni-font-size-base;
			color: gray;
		}

		.line {
			width: 100%;
			height: 2rpx;
			margin-top: 30rpx;
			background: $uni-text-color-line;
		}
	}
</style>
